<template>
  <div class="home-chart-1">
    <div ref="chart" style="height: 100%"></div>
  </div>
</template>

<script>
import chartBaseMixin from '@/common/mixins/chartBaseMixin'
export default {
  mixins: [chartBaseMixin],

  mounted() {
    this.initChart()
    this.setOption()
  },

  methods: {
    setOption() {
      let option = {
        // title: {
        //   subtext: "Fake Data",
        //   left: "center",
        // },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '100%',
            center: ['70%', '50%'],
            right: '1%',
            data: [
              { value: 1048, name: '完美' },
              { value: 735, name: '良好' },
              { value: 580, name: '一般' },
              { value: 484, name: '很差' },
              { value: 300, name: '无状态' }
            ],
            label: {
              show: false
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.chartObj.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped>
.home-chart-1 {
  height: 100%;
}
</style>
